<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css语法</title>
<style type="text/css">
*{padding:0;margin:0;}
/*通配符*/
/*div{属性:"属性值"}*/
div{width:1000px;height:100px;background:red;}

div{width:1000px;height:200px;background:blue;}
.box{background:orange;}
#bbox{background:green;}
/*a{text-decoration:none;font-size:100px;}*/


/*任何时候都要注意 命名不要数字开头 */
/*直接通过标签的名字去选择的 叫做标签选择符*/
/*同样的选择器 后写会覆盖先写的*/
/*class 在使用的时候 前面加一个点 跟着标签class属性的值*/
/*id 在使用的时候 前面使用# 加上标签class属性的值  但是id的命名要注意,最好不要使用关键字*/
/*id的优先级> class优先级> 标记优先级*/
/*-----------------------------------------------------------------------------------------------------*/
a:link{color:yellow;}
/*未访问之前的*/
a:visited{color:green;}
/*访问过的*/
a:hover{color:purple;}
/*鼠标在悬浮*/
a:active{color:red;}
/*鼠标正在点击的时候*/
/*------------群组选择器-----说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。--------------------*/
.box,#box1,.box2,.box3{
	width:100px;
	height:100px;
	background:red;
	}
/*--------------------包含选择器------------------------*/
.box a{font-size:36px;}
/*选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;
*/
div.box2{width:200px;height:200px;background:yellow;}
.box2{width:200px;height:200px;background:#345;}
</style>
</head>

<body>
<div></div>
<br/>
<div></div>
<br/>

<div class="box">
<a href="#">强,无敌!!</a>
<a href="#">强,无敌!!</a>
<a href="#">强,无敌!!</a>
</div>
<br/>
<div id="box1"></div>
<br/>
<div class="box2">box2</div>
<br/>
<div class="box3"></div>
<br/>



<div id="bbox" class="box">
</div>
<a href="#">强,无敌!!</a>

</body>
</html>
